<template>
  <view class="bd">
    <view class="u-text-center">
      <image
        src="../../static/img/logo1.png"
        mode="aspectFit"
        style="width: 180upx; height: 400upx; margin-top: 50upx"
      ></image>
    </view>

    <view class="inp-group">
      <view class="inp-item">
        <view class="inpRow flex">
          <image
            src="../../static/img/mobile.png"
            mode="widthFix"
            class="icon"
          ></image>
          <input
            class="inp bzs"
            type="number"
            placeholder="请输入手机号"
            v-model="loginKey"
            maxlength="11"
          />
        </view>
        <view class="uni-item-line"></view>
        <view class="tip">未注册的手机号验证后自动创建账号</view>
      </view>
      <view style="height: 50upx"></view>
      <view class="inp-item">
        <view class="inpRow flex flex-al-c">
          <!-- <image src="../../static/img/mobile.png" mode="widthFix" class="icon"></image> -->
          <input
            class="inp bzs"
            type="number"
            placeholder="请输入验证码"
            v-model="loginValue"
          />
          <text class="getCode" type="default" @tap="sendCode">{{
            codeMsg
          }}</text>
        </view>
        <view class="uni-item-line"></view>
        <view class="tip" @tap="goLogin2">密码登录</view>
      </view>
    </view>
    <!-- login -->
    <view class="isAgree flex flex-al-c">
      <view class="check" :class="{ active: isAgree }" @tap="isCheck"></view>
      <view class="flex s2" @tap="isCheck"
        >我已阅读并同意
        <view style="color: #18c7e1" @click="goinfo1">《使用条款》</view>和
        <view style="color: #18c7e1" @click="goinfo2">《隐私协议》</view>
      </view>
    </view>
    <view style="width: 80%; margin: 0 auto; margin-top: 30upx">
      <button
        type="default"
        style="background: #18c7e1; color: #fff"
        @click="loginG"
        class="s3"
      >
        登录
      </button>
      <button
        type="default"
        style="background: #18c7e1; color: #fff; margin-top: 20upx"
        @tap="goReg"
        class="s3"
      >
        注册
      </button>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      isAgree: false,
      loginKey: "",
      loginValue: "",
      codeMsg: "获取验证码",
      count: 60,
      interval: null,
    };
  },
  onBackPress(options) {
    return true;
  },
  onLoad(options) {
    this.getCid();
    this.loginKey = options.number;
    this.autoDownNew();
  },
  methods: {
    //获取cid
    getCid() {
      // #ifdef  APP-PLUS
      console.log("获取cid");
      var t1 = setInterval(function () {
        // console.log('定时器');
        //扩展API加载完成事
        var cid = plus.push.getClientInfo().clientid;
        var device = uni.getSystemInfoSync().platform;

        if (cid && cid != null && cid != "null") {
          try {
            console.log(cid);
            uni.setStorageSync("cid", cid);
            this.cid = cid;
            if (device === "android") {
              uni.setStorageSync("device", 0);
            }
            if (device === "ios") {
              uni.setStorageSync("device", 1);
            }
          } catch (e) {
            console.log("获取cid失败");
          }
          clearInterval(t1);
        }
      }, 5000);
      // #endif
    },
    sendCid() {
      this.config
        .post("/uni/saveCidToUser", {
          cid: uni.getStorageSync("cid"),
          ptType: uni.getStorageSync("device"),
        })
        .then((res) => {
          console.log(res);
        });
    },
    goinfo1() {
      uni.navigateTo({
        url: "../main/pub/yhxy",
      });
    },
    goinfo2() {
      uni.navigateTo({
        url: "../main/pub/yszc",
      });
    },
    isCheck() {
      this.isAgree = !this.isAgree;
    },
    goLogin2() {
      uni.navigateTo({
        url: "/pages/login/login2?number=" + this.loginKey,
      });
    },
    goReg() {
      uni.navigateTo({
        url: "/pages/reg/reg",
      });
    },
    // 发送验证码
    sendCode() {
      if (this.codeMsg == "获取验证码" || this.codeMsg == "重新获取验证码") {
        if (!this.config.pub.isMobile(this.loginKey)) {
          uni.showToast({
            title: "请输入正确的手机号",
            icon: "none",
          });
          return;
        }
        let self = this;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/initUser/getVerification", {
            phoneNumber: this.loginKey,
            type: "2", // 1：注册获取验证码；2：登录获取验证码
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              uni.showToast({
                title: res.data.msg,
              });
              self.step = 2;
              self.secondCount();
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }
    },
    secondCount() {
      this.codeMsg = this.count + "s";
      this.interval = setInterval((s) => {
        --this.count;
        this.codeMsg = this.count + "s";
        if (this.count <= 0) {
          clearInterval(this.interval);
          this.count = 60;
          this.codeMsg = "重新获取验证码";
          this.loginValue = "";
        }
      }, 1000);
    },
    valid() {
      if (!this.config.pub.isMobile(this.loginKey)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return false;
      }
      if (!this.loginValue) {
        uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    // 登录
    loginG() {
      this.getCid();
      if (!this.isAgree) {
        uni.showToast({
          title: "请先勾选协议",
          icon: "none",
        });
        return;
      }
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/initUser/login", {
          loginKey: this.loginKey,
          loginValue: this.loginValue,
          type: "2", // 1：密码; 2：验证码
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.config.header.authorization = res.data.msg;
            uni.setStorageSync("token", res.data.msg);
            uni.setStorageSync("subsidiary", "");
            self.config.header.subsidiary = "";
            uni.setStorageSync("community", "");
            // this.toHome(self.config.header.authorization)
            this.config
              .get("/initUser/judgeUserRisgit", {
                mobile: self.loginKey,
              })
              .then((res) => {
                if (uni.getStorageSync("jscid") == 1) {
                  this.sendCid();
                }
                if (res.data.data.state === 0) {
                  uni.navigateTo({
                    url: "/pages/reg/sub-user-info",
                  });
                } else {
                  this.toHome(self.config.header.authorization);
                }
              });
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    toHome(provider) {
      // //console.log(provider)
      this.loginsave(provider);
      uni.switchTab({
        url: "/pages/home/home",
      });
    },
    ...mapMutations(["loginsave"]),
  },
};
</script>
<style lang="less" scoped>
.inp-group {
  width: 75%;
  margin: 0 auto;

  .inp-item {
    .inpRow {
      padding: 10upx;
      padding-left: 0;

      .icon {
        width: 26upx;
        vertical-align: middle;
        margin-right: 20upx;
        margin-left: 0;
        margin-top: 12upx;
      }

      .inp {
        padding: 10upx;
      }

      .getCode {
        font-size: 26upx;
        width: 260upx;
        color: #eab361;
        background-color: #ffe3b6;
        text-align: center;
        line-height: 70upx;
      }
    }

    .tip {
      font-size: 26upx;
      color: #ccc;
      margin-top: 10upx;
    }
  }
}

.isAgree {
  width: 80%;
  margin: 60upx auto 0;
  font-size: 26upx;

  .check {
    width: 30upx;
    height: 30upx;
    border: 1upx dashed #ccc;
  }

  .check.active {
    background: url(../../static/img/right.png) no-repeat;
    background-size: 100%;
    background-position: center;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    height: calc(100vh - var(--window-top));
    background-color: #1b1c1e !important;
  }

  .s2 {
    color: #969696 !important;
  }

  .s3 {
    background-color: #0f91a5 !important;
    color: #dadada !important;
  }

  .bzs {
    color: #fcffff !important;
  }
}
</style>
